<template>
  <scroll-view scroll-y enable-flex class="video_main" @scrolltolower="handleToLower">
    <view class="video_item" v-for="item in videowp" :key="item.id" @click="handleGoVideo(item)">
      <image mode="widthFix" :src="item.img" />
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      videowp: [],
      //是否还有下一页
      hasMore: true
    };
  },
  props: {
    urlobj: Object
  },
  mounted() {
    //组件初始加载后 发送请求
    this.getList();
  },
  watch: {
    urlobj() {
      //初始化页面要渲染的数据数组
      this.videowp = [];
      //初始化参数
      this.hasMore = true;

      //切换标题 发送请求
      this.getList();
    }
  },
  methods: {
    getList() {
      this.request({
        url: this.urlobj.url,
        data: this.urlobj.params
      }).then(result => {
        if (result.res.videowp.length === 0) {
          this.hasMore = false;
          uni.showToast({
            title: "没有更多数据",
            icon: "none"
          });
          return;
        }
        this.videowp = [...this.videowp, ...result.res.videowp];
      });
    },

    //滚动条触底事件(做分页效果)
    handleToLower() {
      if (this.hasMore) {
        //修改请求参数
        this.urlobj.params.skip += this.urlobj.params.limit;
        //发送请求 获取数据
        this.getList();
      } else {
        uni.showToast({
          title: "没有数据了",
          icon: "none"
        });
      }
    },

    handleGoVideo(item) {
      //将数据存到全局共享中
      getApp().globalData.video = item;
      //页面跳转
      uni.navigateTo({
        url: "/pages/videoPlay/index"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.video_main {
  display: flex;
  flex-wrap: wrap;
  height: calc(100vh - 36px);
  .video_item {
    width: 33.33%;
    border: 5rpx solid #fff;
  }
}
</style>